<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视频彩铃权益</title>
    <link rel="stylesheet" href="css/info.css" />
  </head>
  <body>
    <div id="infoApp">
      <!-- 主内容区域 -->
      <div class="main-content">
        <!-- Video视图 -->
        <div class="video-view" v-show="currentView === 'video'">
          <div class="video-body">
            <div class="video-list">
            <div class="video-item" v-for="item in videoList">
              <div class="video-box">
                <div class="video-cover">
                  <img :src="item.fileImage" alt="" />
                </div>
                <div class="video-play" @click="playVideo(item)">
                  <img src="./img/video-play.png" alt="" />
                </div>
              </div>
              <div class="video-set" @click="setVideo(item)">
                <img src="./img/video-set.png" alt="" />
              </div>
            </div>
          </div>
          </div>
        </div>

        <!-- Audio视图 -->
        <div class="audio-view" v-show="currentView === 'audio'">
          <div class="audio-body">
            <!-- 标签页导航 -->
            <div class="tab-navigation">
              <div
                v-for="tab in tabList"
                :key="tab"
                class="tab-item"
                :class="{ active: activeTab === tab }"
                @click="switchTab(tab)"
              >
                {{ tab }}
              </div>
            </div>

            <!-- 音乐列表 -->
            <div class="music-list">
              <div
                v-for="(audio, index) in audioList"
                :key="audio.contentId"
                class="music-item"
            
              >
                <div class="music-info">
                  <div class="music-number">{{ index + 1 }}</div>
                  <div class="music-details">
                    <div class="music-title">{{ audio.musicName }}</div>
                    <div class="music-artist">{{ audio.musicSinger }}</div>
                  </div>
                </div>
                <div class="music-play"   v-if="currentAudioIndex !== index"   @click="playAudio(audio,index)">
                  <img src="img/audio-play.png" alt="播放" />
                </div>
                <div class="music-close"   v-else   @click="closeAudio()">
                  <img src="img/audio-close.png" alt="关闭" />
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 我的视图 -->
        <div class="my-view" v-show="currentView === 'my'">
             <div class="user-profile">
              <div class="user-avatar">
                <img src="img/page2/avatar.svg" alt="头像" />
                <div class="vip-badge" v-if="isVip">V</div>
              </div>
              <div class="user-info">
                <div class="phone-number">{{mobile}}</div>
                <div class="member-status">{{isVip ? '会员' : '普通用户'}}</div>
              </div>
            </div>
          <div class="my-content">
            <!-- 用户信息头部 -->
        
            <!-- 菜单列表 -->
            <div class="my-menu">
              <div class="menu-item" @click="goToVideoInfo">
                <img src="img/page2/icon1.png" alt="问号" />
                <span>什么是视频彩铃?</span>
                <img src="img/page2/arrow.png" alt="箭头" class="arrow" />
              </div>
              <div class="menu-item" @click="goToBusinessRules">
                <img src="img/page2/icon2.png" alt="规则" />
                <span>业务规则</span>
                <img src="img/page2/arrow.png" alt="箭头" class="arrow" />
              </div>
              <div class="menu-item" @click="goToContact">
                <img src="img/page2/icon3.png" alt="联系" />
                <span>联系我们</span>
                <img src="img/page2/arrow.png" alt="箭头" class="arrow" />
              </div>
           
            </div>
          </div>

          <div class="logout-btn" @click="logout">退出登录</div>
        </div>
      </div>

      <!-- 底部导航 -->
      <div class="bottom-navigation">
        <div
          v-for="item in navItems"
          :key="item.name"
          class="nav-item"
          :class="{ active: item.value === currentView }"
          @click="navItemClick(item)"
        >
          <img v-if="item.value !== currentView" :src="item.icon" :alt="item.name" />
          <img v-else="item.value === currentView" :src="item.activeIcon" :alt="item.name" />
          <span>{{ item.name }}</span>
        </div>
      </div>

      <!-- 登录弹窗 -->
      <div class="login-modal" :class="{ show: showLoginModal }">
        <div class="login-overlay" @click="closeLoginModal"></div>
        <div class="login-body">
          <div class="login-content" @click.stop>
            <div class="login-header">
              <div class="login-close" @click="closeLoginModal">
                <img src="img/page2/login-close.png" alt="关闭" />
              </div>
            </div>

            <div class="login-form">
              <div class="input-group">
                <input
                  type="tel"
                  v-model="loginForm.phone"
                  placeholder="请输入移动手机号"
                  class="phone-input"
                />
              </div>
              <div class="input-group">
                <input
                  type="text"
                  v-model="loginForm.code"
                  placeholder="验证码"
                  class="code-input"
                />
                <button
                  class="get-code-btn"
                  :disabled="codeButtonDisabled"
                  @click="sendCode"
                >
                  {{ codeButtonText }}
                </button>
              </div>
            </div>
            <button class="login-btn" @click="checkCode">立即登录</button>
            <!-- <div class="agreement">
              <input
                type="checkbox"
                id="agreeCheckbox"
                v-model="agreeTerms"
                class="agreement-checkbox"
              />
              <label for="agreeCheckbox">
                我已阅读并同意《<a href="#">咪咕音乐白金会员服务协议</a>》和《<a
                  href="#"
                  >隐私政策</a
                >》
              </label>
            </div> -->
          </div>
        </div>
      </div>

      <!-- Toast消息 -->
      <div
        class="toast"
        :class="{ show: showToast, [toastType]: true }"
        v-if="showToast"
      >
        {{ toastMessage }}
      </div>

      <!-- 视频播放弹窗 -->
      <div class="video-modal" v-show="showVideoModal" @click="closeVideoModal">
        <div class="video-modal-content" @click.stop>
       <!-- <div class="video-modal-header">
            <div class="video-back-btn" @click="closeVideoModal">
              <img src="./img/arrow-left.png" alt="返回" />
            </div>
          </div> -->
          <div class="video-modal-body">
            <div class="video-player" v-show="currentVideo">
              <video
                :src="currentVideo.filePath"
                :poster="currentVideo.fileImage"
                class="video-element"
                loop
                ref="videoElement"
                autoplay
                webkit-playsinline='true'  
                playsinline='true'
              ></video>
            </div>
            <div
              class="video-background"
              ref="videoMark"
              @click="closeVideoModal"
            >
              <img src="./img/videoBg.png" alt="" class="video-bg-image" />
              <img src="./img/call.png" alt="" class="video-call-image" />
            </div>
            <!-- <div class="video-set-btn" @click="setVideo">
              <img src="./img/set.png" alt="设置" />
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/info.js"></script>
  </body>
</html>
